<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-22 01:03:45
 * @LastEditTime: 2024-06-24 17:39:42
-->
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { SearchButton, RefreshButton, DeleteBatch, DeleteButton } from '@/components/Button';
import { Table, ColumnSettingsButton } from '@/components/Table';
import { DetailsButton } from '@/components/Dialog';
import { InlineForm } from '@/components/EpForm';
import Page from '@/components/Page/index.vue';
import { SvgIcon } from '@/components/SvgIcon';
import { useRoute } from 'vue-router';
import { props, Emits } from './props';
const route = useRoute();
const { meta } = route;
const { search, table, details } = defineProps(props);
const emit = defineEmits<Emits>();
const activeNames = ref([1, 2]);
const handleChange = (val: any) => {};

const searchRef = ref<any>();
const searchChange = (val: any) => {
    searchRef.value.resetForm();
    if (val !== 0) {
        searchRef.value.resetForm();
    }
    emit('searchChange', search.data);
};
const refreshChange = () => {
    searchChange(1);
};

const currentChange = (current: any) => {
    search.data.current = current;
    searchChange(search.data);
};
const tableConstants = ref(table.constants);

const constantsTable = computed(() => {
    return tableConstants.value.filter(column => column.show);
});
const selectIds = ref<any>();
const selectionChange = (rows: any) => {
    selectIds.value = rows.map((i: any) => i.id);
};
const deleteBatchChange = (ids: any) => {
    emit('deleteBatchChange', ids);
};

const confirmEvent = (row: any) => {
    emit('deleteChange', row.id);
};
const detailsChange = (data: any) => {
    emit('detailsChange', data);
};
</script>
<template>
    <el-collapse v-model="activeNames" @change="handleChange">
        <el-card>
            <el-collapse-item :name="1">
                <template #title>
                    <span class="font-size-4 flex-center">
                        <svg-icon icon="a-mohuchaxun" />
                        {{ $t(`title.search`) }}
                    </span>
                </template>
                <div style="display: flex; flex-wrap: wrap">
                    <InlineForm ref="searchRef" :constants="search.constants" :data="search.data" />
                    <SearchButton @click="searchChange" />
                </div>
            </el-collapse-item>
        </el-card>

        <el-card>
            <el-collapse-item :name="2">
                <template #title>
                    <div class="flex-space-between w-100 padding-right-10">
                        <span class="font-size-4 flex-center">
                            <svg-icon icon="liebiao" />
                            {{ $t(`title.list`) }}
                        </span>
                        <el-button-group type="primary" style="display: flex">
                            <slot name="header-button" />
                            <DeleteBatch :selectIds="selectIds" @deleteBatchChange="deleteBatchChange" />
                            <RefreshButton :refreshChange="refreshChange" />
                            <ColumnSettingsButton :constants="table.constants" />
                        </el-button-group>
                    </div>
                </template>
                <Table v-loading :row-key="table.rowKey" :constants="constantsTable" :table-data="table.data.records" @selectionChange="selectionChange">
                    <template #button="{ scope }">
                        <DetailsButton :title="meta.title" :import-data="scope" :data="details.data" :constants="details.constants" @details-change="detailsChange" />
                        <slot name="table-button" />
                        <DeleteButton :deleteRow="scope" @confirmEvent="confirmEvent" />
                    </template>
                </Table>
                <slot name="table" />
                <Page :current="table.data.current" :size="table.data.size" :total="table.data.total" @handle-current-change="currentChange" />
            </el-collapse-item>
        </el-card>

        <slot />
    </el-collapse>
</template>
<style lang="scss" scoped>
:deep(.ep-card) {
    margin-bottom: 15px !important;
}
:deep(.ep-collapse-item__content) {
    padding: 0;
}
// :deep(.ep-dropdown){
//     vertical-align:-webkit-baseline-middle
// }
</style>
